.app-rating {
  text-align: $comp-text-align;
  .rating-item {
    position: relative;
    display: inline-block;
    width: 1em;
    padding-right: 0.08rem;
    color: $rating-color;
    &.rating-item--active {
      color: $rating-active-color;
    }
    &.rating-item--half {
      color: $rating-color;
      .app-icon:last-child {
        position: absolute;
        top: 0;
        display: block;
        color: $rating-active-color;
      }
    }
  }
  &.app-rating--readonly {
    .rating-item {
      display: none;
    }
    .rating-item--active {
      display: inline-block;
      .app-icon {
        pointer-events: none;
      }
    }
  }
  &.app-rating--disabled {
    cursor: not-allowed;
    .rating-item--active {
      .app-icon {
        color: $rating-active-color;
      }
    }
    .app-icon {
      color: $rating-disabled-color;
      pointer-events: none;
    }
  }
}
